<template>
  <div class="toilet-container">
    <el-card>
      <div style="margin-bottom: 16px;">
        <el-form :inline="true" :model="queryParams">
          <el-form-item label="地址">
            <el-input v-model="queryParams.address" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="queryParams.toiletLevel" placeholder="选择等级" clearable>
              <el-option label="1类" :value="1" />
              <el-option label="2类" :value="2" />
              <el-option label="3类" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadData">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="success" @click="openAddDialog">新增</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData.records" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="deviceNo" label="编号" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="toiletLevel" label="等级" />
        <el-table-column prop="isSmart" label="智能" :formatter="boolFormatter" />
        <el-table-column prop="autoWash" label="自动冲洗" :formatter="boolFormatter" />
        <el-table-column prop="guideSign" label="导向标识" :formatter="boolFormatter" />
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :total="tableData.total"
        @current-change="loadData"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[5, 10, 20]"
        style="margin-top: 16px;"
      />
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="公厕信息" width="600px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form.deviceNo" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="等级">
          <el-select v-model="form.toiletLevel" placeholder="请选择">
            <el-option label="1类" :value="1" />
            <el-option label="2类" :value="2" />
            <el-option label="3类" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否智能">
          <el-switch v-model="form.isSmart" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="自动冲洗">
          <el-switch v-model="form.autoWash" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="导向标识">
          <el-switch v-model="form.guideSign" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message, MessageBox } from 'element-ui'

export default {
  name: "Toilet",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        address: '',
        toiletLevel: null
      },
      tableData: {
        records: [],
        total: 0
      },
      dialogVisible: false,
      form: {
        id: null,
        name: '',
        deviceNo: '',
        address: '',
        toiletLevel: null,
        isSmart: 0,
        autoWash: 0,
        guideSign: 0
      }
    }
  },
  methods: {
    loadData() {
      const params = {}
      for (const key in this.queryParams) {
        const value = this.queryParams[key]
        if (value !== '' && value !== null && value !== undefined) {
          params[key] = value
        }
      }
      params.pageNum = this.queryParams.pageNum
      params.pageSize = this.queryParams.pageSize

      request.get('/toilet/page', {params}).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      })
    },
    resetSearch() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        address: '',
        toiletLevel: null
      }
      this.loadData()
    },
    openAddDialog() {
      this.form = {
        id: null,
        name: '',
        deviceNo: '',
        address: '',
        toiletLevel: null,
        isSmart: 0,
        autoWash: 0,
        guideSign: 0
      }
      this.dialogVisible = true
    },
    edit(row) {
      this.form = {...row}
      this.dialogVisible = true
    },
    save() {
      const url = this.form.id ? '/toilet/update' : '/toilet/add'
      const method = this.form.id ? 'put' : 'post'
      request[method](url, this.form).then(res => {
        if (res.code === 200) {
          this.dialogVisible = false
          this.loadData()
          Message.success(res.msg)
        } else {
          Message.error(res.msg)
        }
      })
    },
    remove(id) {
      MessageBox.confirm('确认删除这条记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        request.delete(`/toilet/delete/${id}`).then(res => {
          if (res.code === 200) {
            this.loadData()
            Message.success(res.msg)
          } else {
            Message.error(res.msg)
          }
        })
      })
    },
    boolFormatter(row, column, cellValue) {
      return cellValue === 1 ? '是' : '否'
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
.toilet-container {
  padding: 20px;
}
</style>
